{include file="public/base" /}
{block name="main"}
<link rel="stylesheet" href="__PUBLIC__/admin/layui/css/layui.css"  media="all">
<style>
    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
    .form-controls {
        /*display: block;*/
        width: 20%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    }

</style>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>编辑商品</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    {if $goodsInfo['id']>0}
                    <form method="post" id="form" action="{:url('taobao/goodsEdit')}" class="form-horizontal">
                    {else}
                    <form method="post" id="form" action="{:url('taobao/goodsAdd')}" class="form-horizontal">
                    {/if}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品名</label>
                            <div class="col-sm-10">
                                <input type="text" name="goods" class="form-control" value="{$goodsInfo['goods']}" required>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品类型</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="type">
                                {foreach name="taobaotype" id="vall"}
                                    <option value="{$vall.id}" {if $goodsInfo['type']==$vall.id}selected{/if}>{$vall.name}</option>
                                {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">规格</label>
                            <div class="col-sm-10 guige">
                                <a href="JavaScript:;" class="btn btn-primary fu" style="display: block;width: 100px;">添加规格</a>
                                {if condition="!empty($goodsInfo['params'])"}
                                    <?php $ii=0; ?>
                                    {volist name="goodsInfo['params']" id="v"}
                                    <?php $iii=0?>

                                    <input type="text"  class="form-controls" name="params[{$ii}][title]" placeholder="请填写标题" required="" value="{$v['title']}">
                                    <a class="btn btn-primary zi" href="JavaScript:;" onclick="add_zi({$ii})" class="zi" key="{$ii}">+</a>

                                    <div class="zi_c{$ii}">
                                        {volist name="v['params']" id="vv"}
                                        <input type="text" class="form-controls zi_name" placeholder="请填写名称"  name="params[{$ii}][params][{$iii}][name]" required="" value="{$vv['name']}">
                                        <input type="text" class="form-controls zi_value" placeholder="请填写标题"  name="params[{$ii}][params][{$iii}][value]" required="" value="{$vv['value']}">
                                        <input type="text" class="form-controls zi_price" placeholder="请填写价格"  name="params[{$ii}][params][{$iii}][price]" required="" value="{$vv['price']}">
                                        <p>
                                            <?php $iii++;?>
                                        {/volist}
                                    </div>
                                    <?php $ii++;?>
                                    {/volist}
                                {else/}
                                    <input type="text"  class="form-controls" name="params[0][title]" placeholder="请填写标题" required="" value="">
                                    <a class="btn btn-primary zi" href="JavaScript:;" onclick="add_zi(0)" class="zi" key="0">+</a>

                                    <div class="zi_c0">
                                        <input type="text" class="form-controls zi_name" placeholder="请填写一级"  name="params[0][params][0][name]" required="" value="">
                                        <input type="text" class="form-controls zi_value" placeholder="请填写库存"  name="params[0][params][0][value]" required="" value="">
                                        <input type="text" class="form-controls zi_price" placeholder="请填写价格"  name="params[0][params][0][price]" required="" value="">
                                        <p>
                                    </div>
                                {/if}
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">缩略图</label>
                            <div class="col-sm-10">
                                <div>
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" id="demo1" src="{$goodsInfo['small_img']}">
                                            <p id="demoText"><input type="hidden" name="small_img" value="{$goodsInfo['small_img']}"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品图</label>

                            <div class="col-sm-10">
                                <div>
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="test2">多图片上传</button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list" id="demo3" name="img">
                                                {foreach name="$goodsInfo['img']" id="val"}
                                                <img src="{$val}" alt="{$val}" width="220" onclick="del(this,'{$val}',1)" onmouseover="tips(this)">
                                                {/foreach}
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品简介</label>

                            <div class="col-sm-10">
                                <div class="layui-upload-drag" id="test10">
                                    <i class="layui-icon"></i>
                                    <p>点击上传，或将文件拖拽到此处</p>
                                </div>
                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                    预览图：
                                    <div class="layui-upload-list" id="demo2" name="synopsis" >
                                        {foreach name="$goodsInfo['synopsis']" id="val"}
                                        <img src="{$val}" alt="{$val}" width="220" onclick="del(this,'{$val}',2)" onmouseover="tips(this)">
                                        {/foreach}
                                    </div>
                                </blockquote>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品文字简介</label>

                            <div class="col-sm-10">
                                <textarea name="content" class="form-control" style="height: 100px;">{$goodsInfo['content']}</textarea>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">库存</label>

                            <div class="col-sm-10">
                                <input type="number" oninput="if(value<0)value=value.replace('-','')" class="form-control"name="stock" value="{$goodsInfo['stock']}" required>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">已售数量</label>
                            <div class="col-sm-10">
                                <input type="number" oninput="if(value<0)value=value.replace('-','')" class="form-control" name="sold" value="{$goodsInfo['sold']}" required>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">原价</label>
                            <div class="col-sm-10">
                                <input type="number" oninput="if(value<0)value=value.replace('-','')" class="form-control" name="old_price" value="{$goodsInfo['old_price']}" required>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">售价</label>
                            <div class="col-sm-10">
                                <input type="number" oninput="if(value<0)value=value.replace('-','')" class="form-control" name="price" value="{$goodsInfo['price']}" required>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>

                            <div class="col-sm-10">
                                <input type="number" oninput="if(value<0)value=value.replace('-','')" class="form-control"name="sort" value="{$goodsInfo['sort']}" required>
                            </div>
                        </div>
                        <div id="zhi"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <input type="hidden" name="id" value="{$goodsInfo['gid']|default=0}">
                                {foreach name="$goodsInfo['img']" id="val"}
                                <input type="hidden" name="img[]" value="{$val}">
                                {/foreach}
                                {foreach name="$goodsInfo['synopsis']" id="val"}
                                <input type="hidden" name="synopsis[]" value="{$val}">
                                {/foreach}
                                <!--<button class="btn btn-primary" type="submit" onclick="edit()">保存内容</button>-->
                                <input type="submit" value="保存内容" class="btn btn-primary" >
                                <!--<button class="btn btn-white" type="submit">取消</button>-->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="javascript"}
<script src="ADMIN_JS/content.min.js?v=1.0.0"></script>
<script src="ADMIN_JS/plugins/iCheck/icheck.min.js"></script>
<script src="__PUBLIC__/admin/layui/layui.all.js" charset="utf-8"></script>
<script type="text/javascript">
    $(".fu").click(function(){
        var key = $(".zi").length;
        var html = '<input type="text" class="form-controls" placeholder="请填写标题" name="params['+key+'][title]" required="" value="">\
        <a href="JavaScript:;" class="btn btn-primary zi" onclick="add_zi('+key+')" key="'+key+'">+</a>\
        <div class="zi_c'+key+'">\
            <input type="text" placeholder="请填写一级"  class="form-controls zi_name" name="params['+key+'][params][0][name]" required="" value="">\
            <input type="text" placeholder="请填写库存"   class="form-controls" name="params['+key+'][params][0][value]" required="" value="">\
            <input type="text" placeholder="请填写价格"   class="form-controls" name="params['+key+'][params][0][price]" required="" value="">\
            <p>\
        </div>';
        $('.guige').append(html);
    })
    function add_zi(key){
        var z_key = $(".zi_c"+key+" > .zi_name").length;
        var html = '<input type="text"  placeholder="请填写一级" class="form-controls zi_name" name="params['+key+'][params]['+z_key+'][name]" required="" value="">\
            <input type="text" placeholder="请填写库存" class="form-controls" name="params['+key+'][params]['+z_key+'][value]" required="" value="">\
            <input type="text" placeholder="请填写价格" class="form-controls" name="params['+key+'][params]['+z_key+'][price]" required="" value=""><p>';
        $(".zi_c"+key).append(html);

    }
    // $(".zi").on("click","a",function(){
    //     // document.querySelector("body > form > div > div > input[type=text]:nth-child(2)")
    //     var key = $(this).attr("key");
    //     var z_key = $(".zi_c"+key+" > .zi_name").length;
    //     var html = '<input type="text" class="form-controls zi_name" name="params['+key+'][params]['+z_key+'][name]" required="" value="">\
    //         <input type="text" class="form-controls" name="params['+key+'][params]['+z_key+'][value]" required="" value="">\
    //         <input type="text" class="form-controls" name="params['+key+'][params]['+z_key+'][price]" required="" value=""><p>';
    //     $(".zi_c"+key).append(html);
    // })
</script>
<script>
    // var ue = UE.getEditor('editor');
    $("#purchase").on('click', function () {
        clickSwitch()
    });
    function edit()
    {
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

        var goods = $('[name="goods"]').val();
        var spec = $('[name="spec"]').val();
        var small_img = $('[name="small_img"]').val();
        var stock = $('[name="stock"]').val();
        var sold = $('[name="sold"]').val();
        var old_price = $('[name="old_price"]').val();
        var price = $('[name="price"]').val();
        var sort = $('[name="sort"]').val();
        var content = $('[name="content"]').val();
        var params =$('#form').serializeArray();
        //console.log(params);return;
        var goodsInfoImg = new Array();
        var img = new Array();
        $('[name="imgs[]"]').each(function(i){
            goodsInfoImg.push($('[name="imgs[]"]').eq(i).val());
        });
        $('[name="img[]"]').each(function(i){
            img.push($('[name="img[]"]').eq(i).val());
        });
        if(goods==''){
            layer.msg('请填写商品名',{icon:6,time:1500});return false;
        }
        if(spec==''){
            layer.msg('请填写商品规格',{icon:6,time:1500});return false;
        }
        if(small_img==''){
            layer.msg('请填上传缩略图',{icon:6,time:1500});return false;
        }
        if(img==''){
            var checksImg = '{$goodsInfo["checkImg"]}';
            var arrImg = checksImg.split(',');
            if(arrImg.length==0 || arrImg.length==''){
                layer.msg('请上传商品轮播图片',{icon:6,time:1500});return false;
            }else{
                img = 1;
            }
        }
        if(goodsInfoImg=='') {
            var checks = '{$goodsInfo["checkSynopsis"]}';
            var arr = checks.split(',');
            if(arr.length==0 || arr.length==''){
                layer.msg('请上传简介图片',{icon:6,time:1500});return false;
            }else{
                goodsInfoImg = 1;
            }
        }
        if(stock==''){
            layer.msg('请输入库存',{icon:6,time:1500});return false;
        }
        if(sold==''){
            layer.msg('请输入已售数量',{icon:6,time:1500});return false;
        }
        if(old_price==''){
            layer.msg('请输入原价',{icon:6,time:1500});return false;
        }
        if(price==''){
            layer.msg('请输入售价',{icon:6,time:1500});return false;
        }
        var id = $("[name='id']").val();
        if(id!=0){
            var url = '{:url("taobao/goodsEdit")}';
        }else{
            var url = '{:url("taobao/goodsAdd")}';
        }
        var loading = layer.msg('正在提交数据，请稍后...', {icon: 16,time:6000});
        $.ajax({
            type:'post',
            url:url,
            data:{'id':id,'goods':goods,'spec':spec,'small_img':small_img,'img':img,'stock':stock,'sold':sold,'old_price':old_price,'price':price,'synopsis':goodsInfoImg,'sort':sort,'content':content,'params':params},
            success:function(data){
                layer.close(loading);
                if(data.code==1){
                    layer.msg(data.msg,{icon:6,time:1500});
                    setTimeout(function(){window.parent.location.reload();},1000);
                }else{
                    layer.msg(data.msg,{icon:5,time:1500});
                }
            }
        })
    }

</script>
<script>
    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;
        //缩略图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '{:url("Goods/uploadImg")}'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    layer.msg('上传成功');
                    //$("#demoText").append('<input type="hidden" name="small_img"  value=' + res.filename + ' >');
                    $("[name='small_img']").val(res.filename);
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        //商品图片上传

        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '{:url("Goods/uploadImg")}'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo3').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                if(res.code > 0){
                    layer.msg('上传成功');
                    $("#zhi").append('<input type="hidden" name="img[]"  value=' + res.filename + ' >');
                }
            }
        });

        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: '{:url("Goods/uploadImg")}'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    console.log(index);
                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="220">')
                });
            }
            , done: function (res) {
                //上传完毕
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 6, time: 1500});
                    $("#zhi").append('<input type="hidden" name="synopsis[]" value=' + res.filename + ' >');
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1500});
                }
            }
        });
    });
    function del(index,src,types){
        var id = {$goodsInfo.id};
        if(types==1){
            var url = '{:url("Goods/delImg")}';
        }else{
            var url = '{:url("Goods/delImgs")}';
        }        $.ajax({
            type:'post',
            url:url,
            data:{'src':src,'id':id},
            success:function(res){
                if(res.code==1){
                    layer.msg(res.msg,{icon:6,time:1500});
                    setTimeout(function(){location.reload();},1000)
                }else{
                    layer.msg(res.msg,{icon:6,time:1500});
                }
            }
        })
    }
    function tips(indexs){
        layer.tips('单击删除', indexs);
    }

</script>
{/block}